<!DOCTYPE html>
<html>
  <head>
    <title>Handlebars模板生成</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.min.js"></script>
    <script src="./baseLayout.js"></script>
    <script src="./helper.js"></script>
  </head>
  <body style="margin: 0; padding: 0; background: #e5e5e5; width: 100%">
    <script id="entry-template" type="text/x-handlebars-template">
      <div id="eng" style="max-width: 600px;margin: auto;background: #FFFFFF;border: 1px solid #E5E5E5;">
          {{> headerPartial}}
          <div id="content" style="min-height: 350px;margin: 0 auto;padding:28px 32px 0 32px;border-radius: 2px;">
             {{标题}}
             {{分割线}}
             <!-- begin -->
             {{描述 Msg}}
             {{描述 Var1}}
             {{描述 Msg1}}
             {{钓鱼码}}
          </div>
          {{> footerPartial}}
      </div>
    </script>

    <script>
      const outputName = 'MOCK';
      // 外部引入公共模板注册使用
      const headerPartial = createHeader();
      const footerPartial = createFooter();
      Handlebars.registerPartial("headerPartial", headerPartial);
      Handlebars.registerPartial("footerPartial", footerPartial);  // 补充资料 RemittanceApplicationPass RemittanceApplicationReject
 
      // 语言切换模块
      const languageMap = {
        en: {
          Title: "Account password change reminder",
          Welcome:"Tip: This email is sent automatically by the system, please do not 'reply' to this email directly. If you have any questions, you are welcome to join us",
          Community:"Community",
          FishingCode: "Anti-fishing code",
          FishingCodeTip:"This email was sent by the system, please do not reply.",
          Service:"If you do not operate by yourself, please change the password as soon as possible. If you have any questions, please contact customer service on the official website",
          Msg: "Your account password request has not been approved.",
          Msg1: "If you have any questions, please contact customer service.",
          Var1:"Reason: {{Reason}}",
          Var2:"Reason for rejection: {{Reason}}",
        },
        cn: {
          Title: "账号密码修改提醒",
          Welcome:"提示：此邮件是系统自动发出，请不要直接”回复”本邮件。如果您有任何疑问，欢迎您加入", 
          Community:"社群",
          FishingCode: "防钓鱼码",
          FishingCodeTip:"此邮件由系统发出，请勿回复。",
          Service:"如非本人操作，请尽快修改密码，如有问题请联系官网客服。",
          Msg: "您的账号密码申请未通过。",
          Msg1: "如有问题，请联系客服。",
          Var1:"原因 {{Reason}}",
        },
      };

      function data(defaultLang = "cn") {
        return languageMap[defaultLang];
      }

      var source = document.getElementById("entry-template").innerHTML;
      var template = Handlebars.compile(source);
      var htmlContent = template(data());

      document.body.innerHTML += htmlContent;
      // 上方为渲染页面代码
      const htmlHeader = (defaultLang = "cn") => {
        return `<!DOCTYPE html>
        <html>
        <head>
            <title>${languageMap[defaultLang].Title}</title>
            <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        </head>
        <body  style="margin: 0; padding: 0; background: #E5E5E5;width: 100%;">`;
      };
      const htmlFooter = `</body>
        </html>`;
      function createFile(htmlFile, htmlFileName) {
        var blob = new Blob([htmlFile], { type: "text/html" });

        // 创建一个 FormData 对象
        var formData = new FormData();
        formData.append("htmlFile", blob);
        formData.append("fileName", htmlFileName);
        formData.append("extension", "html");

        // 发送 POST 请求到服务器
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/upload", true);
        xhr.onload = function () {
          if (xhr.status === 200) {
            console.log("File uploaded successfully");
          } else {
            console.error("Failed to upload file");
          }
        };
        xhr.send(formData);
      }

      document.addEventListener("keydown", function (event) {
        const key = event.key;
        if (key == "`") {
          const htmlCnFile =
            htmlHeader("cn") + template(data("cn")) + htmlFooter;
          // 自定义的文件名称customCn
          createFile(htmlCnFile, `${outputName}Cn`);
          setTimeout(() => {
            // 英文生成修改导入的footer组件
            const footerPartial = createFooter("en");
            Handlebars.registerPartial("footerPartial", footerPartial);
            var source = document.getElementById("entry-template").innerHTML;
            var template = Handlebars.compile(source);
            const htmlEnFile =
              htmlHeader("en") + template(data("en")) + htmlFooter;
          createFile(htmlEnFile, `${outputName}En`);
          }, 150);
        }
      });
      // 双击网页的第一个图片元素触发下载
      document
        .querySelectorAll("img")[0]
        .addEventListener("dblclick", function (event) {
          event.preventDefault(); // 阻止默认右键菜单行为
          console.log("开始下载");
          const htmlCnFile =
            htmlHeader("cn") + template(data("cn")) + htmlFooter;
          // 自定义的文件名称customCn
          createFile(htmlCnFile, `${outputName}Cn`);
          setTimeout(() => {
            // 英文生成修改导入的footer组件
            const footerPartial = createFooter("en");
            Handlebars.registerPartial("footerPartial", footerPartial);
            var source = document.getElementById("entry-template").innerHTML;
            var template = Handlebars.compile(source);
            const htmlEnFile =
              htmlHeader("en") + template(data("en")) + htmlFooter;
            createFile(htmlEnFile, `${outputName}En`);
          }, 150);
        });
    </script>
    <script>
      const ws = new WebSocket("ws://localhost:3333");
      ws.onmessage = (event) => {
        if (event.data === "reload") {
          location.reload(); // 收到 reload 消息时重新加载页面
        }
      };
    </script>
  </body>
</html>
